<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="author" content="yyk,15934524011@163.com">
    <meta name="revised" content="yyk, 2022">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <script type="text/javascript">
        function setRem() {
            var html = document.documentElement;
            var hWidth = html.getBoundingClientRect().width;
            if (hWidth > 640) hWidth = 640;
            html.style.fontSize = hWidth / 10 + 'px';
        }

        setRem();
    </script>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <style>
        body,
        html,
        #wrap {
            height: 100%;
            background: #000;
        }

        .video {
            width: 100%;
            height: 100%;
        }

        .video_box::-webkit-media-controls-fullscreen-button {
            display: none;
        }

        .video_box::-webkit-media-controls-mute-button {
            display: none !important;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            background: #000;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #000;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .video_box {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /*播放按钮*/
        .video_play {
            width: 2.95rem;
            height: 2.95rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 999;
        }
        .top-box{position:fixed;top:0;left:0;width:100%;z-index:9}
        .search-box{padding:.26667rem .4rem 0 .4rem}
        .search-box .search{width:9.2rem;height:.90667rem;display:flex;align-items:center;justify-content:center;background-color:rgba(255, 255, 255, .2);border-radius:0.453rem}
        .search-box .search .inp{margin:0 .33333rem;flex:1;height:.90667rem;font-size:0.373rem;color:#fff;border:0;background-color: rgba(255, 255, 255, 0);}
        :focus-visible {outline: -webkit-focus-ring-color auto 0px;}
        .search-box .search .inp::placeholder{color:#ffffff}
        .search-box .search .icon{margin:0 .33333rem;width:.42667rem;height:.4rem}
        .count{position:fixed;top:1rem;right:0.4rem;font-size: 0.373rem;color: #ffffff;z-index:9}
        .count span{font-size: 0.533rem;}
        .bottom-box{position: fixed;bottom: 0;left: 0;width: 100%;padding-bottom: 0.2rem;}
        .bottom-box .title{padding: 0 0.4rem;font-size: 0.453rem;color: #ffffff;text-align: left;margin: 0;}
        .bottom-box .info{padding: 0.08rem 0.4rem;font-size: 0.347rem;line-height: 0.533rem;color: #ffffff;text-align: left;}
        .look-count{padding: 0 0.4rem;height: 0.773rem;display:flex;align-items: center;background-color: rgba(0, 0, 0, .6);}
        .look-count .icon{ width:.37333rem;height:.37333rem}
        .look-count .num{font-size: 0.373rem;color: #ffd71b;}
</style>
</head>

<body>
    <div class="top-box">
        <div class="search-box">
            <div class="search">
                <input type="search" placeholder="请输入关键词" class="inp"/>
                <img src="./images/search2.png" alt=""  class="icon">
            </div>
        </div>
    </div>

    <div id="wrap" v-cloak>
        <p class="count"><span>{{current+1}}</span>/{{video_list.length}}</p>
        <div class="video">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(i,index) in video_list" :key="index">
                        <!-- 在video里不能设置autoplay属性，不然所有请求到的视频都会播放，必须手动播放-->
                        <video id="video" class="video_box" src="./1.mp4" @click="video_btn" loop
                            webkit-playsinline="true" x5-playsinline x5-video-player-type="h5"
                            x5-video-player-fullscreen="true" playsinline="true" x-webkit-airplay="allow"
                            x5-video-orientation="portrait" preload="meta" poster="./play.png">
                        </video>
                        <!-- 上面的poster就是视频的预览图（海报图片）-->
                        <!-- 视频播放按钮 -->
                        <img @click="video_btn" src="./play.png" class="video_play" v-if="video_play" alt="">
                        <div class="bottom-box">
                            <p class="title">快于时代 优享世界</p>
                            <p class="info">中国移动和华为联合召开主题“标准新阶段 能力新突破，数智新变革”的5G-Advanced双链融合无线创新成果发布会。</p>
                            <div class="look-count">
                                <img src="./images/look3.png" class="icon">
                                <p class="num">16,548次浏览量</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./swiper-bundle.min.js"></script>
<script type="text/javascript">
    var vm;
    vm = new Vue({
        el: "#wrap",
        data: function () {
            return {
                video_list: [],
                video_play: false,//是否显示播放按钮 false不显示 true显示
                current: 0,//记录当前播放的是哪个 推荐推荐推荐 视频 值为index下标
            }
        },
        methods: {
            //视频点击
            video_btn() {
                var that = this;
                let nu = that.current + 1
                let idi = ".swiper-container .swiper-slide:nth-child(" + nu + ") video"
                // if ($(idi).get(0).currentTime == 0) {//用视频播放时间判断视频是否在播放
                //     return false
                // }
                if ($(idi).get(0).paused) {//为jq获取视频的状态属性，具体可百度
                    console.log("播放");
                    that.video_play = false
                    $(idi).trigger('play');
                } else {
                    console.log("暂停");
                    that.video_play = true
                    $(idi).trigger('pause');
                }
            },
            //获取推荐的视频列表
            get_video() {
                var that = this;
                //这边是动态获取视频数据
                that.video_list = that.video_list.concat(["./1.mp4","./1.mp4"])
                that.show_video();
            },
            //展示视频
            show_video() {
                var that = this;
                setTimeout(function () {
                    $(".swiper-container .swiper-slide:nth-child(1) video").trigger('play');//获取视频后，手动播放第一个视频
                    swiper = new Swiper('.swiper-container', {
                        direction: 'vertical',
                        slidesPerView: 1,
                        mousewheel: true,
                        observer: true,
                        observeParents: true,
                        on: {
                            //上滑
                            slideNextTransitionStart: function () {
                                console.log("视频上滑");
                                that.current++;
                                var nu = that.current + 1
                                $(".swiper-container .swiper-slide video").trigger('pause');//其他视频暂停
                                let idi = ".swiper-container .swiper-slide:nth-child(" + nu + ") video"
                                $(idi)[0].currentTime = 0//重新设置播放时间 即重头开始播放
                                that.video_play = false
                                $(idi).trigger('play');
                                if (that.lastPage != that.page) {
                                    if (nu + 1 == that.video_list.length) {//下一条就是最后一条
                                        that.page++;
                                        that.get_video();
                                    }
                                } else {
                                    if (nu == that.video_list.length) {
                                        console.log("到底了");
                                    }
                                }
                            },
                            //下滑
                            slidePrevTransitionStart: function () {
                                console.log("视频下滑");
                                that.current--;
                                let nu = that.current + 1
                                $(".swiper-container .swiper-slide video").trigger('pause');//其他视频暂停
                                let idi = ".swiper-container .swiper-slide:nth-child(" + nu + ") video"
                                $(idi)[0].currentTime = 0//重新设置播放时间 即重头开始播放
                                that.video_play = false
                                $(idi).trigger('play');//为jq播放/暂停h5视频，具体可百度；
                            }
                        }
                    })
                }, 1000)
            },
        },
        mounted() {
            var that = this;
            that.get_video();
        }
    })

</script>
</html>